<ConditionalLoadingSpinner @condition={{this.isLoading}}>
  {{#if this.noContent}}
    <EmptyState
      @title={{this.emptyState.title}}
      @body={{this.emptyState.body}}
    />
  {{else}}
    <div class="docs-browse">
      {{#if this.site.mobileView}}
        {{#unless this.selectedTopic}}
          <DButton
            class="docs-expander"
            @icon={{if this.expandedFilters "angle-up" "angle-down"}}
            @action={{action "toggleFilters"}}
            @label="docs.filter_button"
          />
        {{/unless}}
      {{/if}}

      <div class="docs-filters">
        {{#if this.expandedFilters}}
          {{#if this.canFilterSolved}}
            <div class="docs-items docs-solved">
              <label class="checkbox-label docs-item">
                <Input
                  @type="checkbox"
                  @checked={{readonly this.filterSolved}}
                  {{on
                    "input"
                    (action "onChangeFilterSolved" value="target.checked")
                  }}
                />
                <PluginOutlet @name="custom-checkbox" />
                {{i18n "docs.filter_solved"}}
              </label>
            </div>
          {{/if}}

          {{#if this.categories}}
            <div class="docs-items docs-categories">
              <section class="item-controls">
                <h3>
                  {{i18n "docs.categories"}}
                </h3>
                <div class="item-controls-buttons">
                  <DButton
                    class={{if
                      (eq this.categorySort.type "alpha")
                      "categories-alphabet active"
                      "categories-alphabet"
                    }}
                    @icon={{this.categorySortAlphaIcon}}
                    @action={{this.toggleCategorySort}}
                    @actionParam="alpha"
                  />
                  <DButton
                    class={{if
                      (eq this.categorySort.type "numeric")
                      "categories-amount active"
                      "categories-amount"
                    }}
                    @icon={{this.categorySortNumericIcon}}
                    @action={{this.toggleCategorySort}}
                    @actionParam="numeric"
                  />
                  <PluginOutlet @name="categories-controls-buttons-bottom" />
                </div>
              </section>
              {{#if this.showCategoryFilter}}
                <Input
                  @value={{this.categoryFilter}}
                  class="filter"
                  placeholder={{i18n "docs.categories_filter_placeholder"}}
                />
              {{/if}}
              <ul>
                {{#each this.sortedCategories as |category|}}
                  <li>
                    <DocsCategory
                      @category={{category}}
                      @selectCategory={{action
                        "updateSelectedCategories"
                        category
                      }}
                    />
                  </li>
                {{/each}}
              </ul>
            </div>
          {{/if}}

          {{#if (and this.tags this.shouldShowTags)}}
            <div class="docs-items docs-tags">
              <section class="item-controls">
                <h3>
                  {{i18n "docs.tags"}}
                </h3>
                <div class="item-controls-buttons">
                  <DButton
                    class={{if
                      (eq this.tagSort.type "alpha")
                      "tags-alphabet active"
                      "tags-alphabet"
                    }}
                    @icon={{this.tagSortAlphaIcon}}
                    @action={{this.toggleTagSort}}
                    @actionParam="alpha"
                  />
                  <DButton
                    class={{if
                      (eq this.tagSort.type "numeric")
                      "tags-amount active"
                      "tags-amount"
                    }}
                    @icon={{this.tagSortNumericIcon}}
                    @action={{this.toggleTagSort}}
                    @actionParam="numeric"
                  />
                  <PluginOutlet @name="tags-controls-buttons-bottom" />
                </div>
              </section>
              {{#if this.showTagFilter}}
                <Input
                  @value={{this.tagFilter}}
                  class="filter"
                  placeholder={{i18n "docs.tags_filter_placeholder"}}
                />
              {{/if}}
              <PluginOutlet
                @name="before-docs-tag-list"
                @connectorTagName="div"
                @outletArgs={{hash
                  tags=this.tags
                  updateSelectedTags=this.updateSelectedTags
                }}
              />
              <ul>
                {{#each this.sortedTags as |tag|}}
                  <li class="docs-filter-tag-{{tag.id}}">
                    <DocsTag
                      @tag={{tag}}
                      @selectTag={{action "updateSelectedTags" tag}}
                    />
                  </li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
          {{#if (and this.tagGroups this.shouldShowTagsByGroup)}}
            <div class="docs-items docs-tags">
              <section class="item-controls">
                <h3>
                  {{i18n "docs.tags"}}
                </h3>
                <div class="item-controls-buttons">
                  <DButton
                    class={{if
                      (eq this.tagSort.type "alpha")
                      "tags-alphabet active"
                      "tags-alphabet"
                    }}
                    @icon={{this.tagSortAlphaIcon}}
                    @action={{this.toggleTagSort}}
                    @actionParam="alpha"
                  />
                  <DButton
                    class={{if
                      (eq this.tagSort.type "numeric")
                      "tags-amount active"
                      "tags-amount"
                    }}
                    @icon={{this.tagSortNumericIcon}}
                    @action={{this.toggleTagSort}}
                    @actionParam="numeric"
                  />
                  <PluginOutlet @name="tags-controls-buttons-bottom" />
                </div>
              </section>
              {{#if this.showTagFilter}}
                <Input
                  @value={{this.tagFilter}}
                  class="filter"
                  placeholder={{i18n "docs.tags_filter_placeholder"}}
                />
              {{/if}}
              <PluginOutlet
                @name="before-docs-tag-list"
                @connectorTagName="div"
                @outletArgs={{hash
                  tags=this.tags
                  updateSelectedTags=this.updateSelectedTags
                }}
              />
              <ul>
                {{#each this.sortedTagGroups as |tagGroup|}}
                  <li class="docs-filter-tag-group-{{tagGroup.id}}">
                    {{tagGroup.name}}
                    <ul>
                      {{#each tagGroup.tags as |tag|}}
                        <li class="docs-filter-tag-{{this.id}}">
                          <DocsTag
                            @tag={{tag}}
                            @selectTag={{action "updateSelectedTags" tag}}
                          />
                        </li>
                      {{/each}}
                    </ul>
                  </li>
                {{/each}}
              </ul>
            </div>
          {{/if}}
        {{/if}}
      </div>

      {{#if this.selectedTopic}}
        <ConditionalLoadingSpinner @condition={{this.isTopicLoading}}>
          <DocsTopic @topic={{this.topic}} @return={{action "returnToList"}} />
          <PluginOutlet
            @name="below-docs-topic"
            @connectorTagName="div"
            @outletArgs={{hash topic=this.topic}}
          />
        </ConditionalLoadingSpinner>
      {{else}}
        <div class="docs-results">
          {{#if this.isSearchingOrFiltered}}
            {{#if this.emptyResults}}
              <div class="result-count no-result">
                {{i18n "search.no_results"}}
              </div>
              <span>
                <PluginOutlet
                  @name="after-docs-empty-results"
                  @connectorTagName="div"
                />
              </span>
            {{else}}
              <div class="result-count">
                {{i18n "docs.search.results" count=this.topicCount}}
              </div>
            {{/if}}
          {{/if}}

          {{#unless this.emptyResults}}
            <LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
              <BasicTopicList
                @topics={{this.topics}}
                @ascending={{this.ascending}}
                @order={{this.orderColumn}}
                @changeSort={{action "sortBy"}}
              />
            </LoadMore>
            <ConditionalLoadingSpinner @condition={{this.isLoadingMore}} />
          {{/unless}}
        </div>
      {{/if}}
    </div>
  {{/if}}
</ConditionalLoadingSpinner>